<template>
  <view class='container' @click.stop="goDetail($event)">
    <view class='head'>
      <img class='head-img' :src='imageUrl + item.user.photo' 
	  :data-loginname='item.user.nickname' @click="getLimitPictures()">
      <view class='info'>  
        <span>{{item.user.nickname}}</span>
      </view>
    </view>
    <view class='body'>
      <p>{{item.title}}</p>
    </view>
	<view class="cu-form-group" v-if="item.pictures.length != 0">
	   <view class="gird-three-limit-img-item" v-for="(image,index) in item.pictures" :key="index">
			  <image :src="imageUrl+item.pictures[index]">
			  </image>
		</view>
	</view>
    <view class='foot'>
      <view class='later'>
        <span class='number'>发布时间：{{formatUTC(item.time)}}</span>
      </view>
    </view>
  </view>
</template>

<script>
// import { passTime } from "../utils/index";
export default {
	data() {
		return {
			imageUrl:this.$imageUrl
		}
	},
  props: {
    item: Object,
    hidden: {
      // 个人中心展示帖子隐藏一部分东西的复用
      default: false,
      type: Boolean
    }
  },
  methods: {
	//格式化时间
	 formatUTC(utc_datetime) {
	  // 转为正常的时间格式 年-月-日 时:分:秒  ：2020/6/14 下午6:55:05
	  var T_pos = utc_datetime.indexOf('T');
	  var Z_pos = utc_datetime.indexOf('+0000');
	  var year_month_day = utc_datetime.substr(0,T_pos);
	  var hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
	  var new_datetime = year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06
	
	  // 处理成为时间戳
	  timestamp = new Date(Date.parse(new_datetime));
	  timestamp = timestamp.getTime();
	  timestamp = timestamp/1000;
	
	  // 增加8个小时，北京时间比utc时间多八个时区
	  var timestamp = timestamp+8*60*60;
	
	  // 时间戳转为时间
		var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().
			replace("/", "年").replace("/","月").replace(" ", "日 ");	  
		return beijing_datetime;
	} ,
    goAuthorPage(e) {
      // e.currentTarget.dataset.author
      wx.navigateTo({
        url: `../user/main?loginname=${e.currentTarget.dataset.loginname}`
      });
    },
    goDetail() {
      wx.navigateTo({
        url: `../detail/main?topicid=${this.item.id}`
      });
    }
  }
};
</script>

<style lang='scss'  scoped>
	.cu-form-group{
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 19rpx;
		background: white;
		.gird-three-limit-img-item{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width:33%;
			height: 177rpx;
			image{
				display: inline-block;
				width: 170rpx;
				height: 170rpx;

			}
		}
	}


.grid {
	display: flex;
	flex-wrap: wrap;
}

.grid.grid-square {
	overflow: hidden;
}

.grid.grid-square .cu-tag {
	position: absolute;
	right: 0;
	top: 0;
	border-bottom-left-radius: 6rpx;
	padding: 6rpx 12rpx;
	height: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.grid.grid-square>view>text[class*="cuIcon-"] {
	font-size: 52rpx;
	position: absolute;
	color: var(--grey);
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.grid.grid-square>view {
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 6rpx;
	position: relative;
	overflow: hidden;
}

.grid.grid-square>view.bg-img image {
	width: 100%;
	height: 100%;
	position: absolute;
}

.grid.col-1.grid-square>view {
	padding-bottom: 100%;
	height: 0;
	margin-right: 0;
}

.grid.col-2.grid-square>view {
	padding-bottom: calc((100% - 20rpx)/2);
	height: 0;
	width: calc((100% - 20rpx)/2);
}

.grid.col-3.grid-square>view {
	padding-bottom: calc((100% - 40rpx)/3);
	height: 0;
	width: calc((100% - 40rpx)/3);
}

.grid.col-4.grid-square>view {
	padding-bottom: calc((100% - 60rpx)/4);
	height: 0;
	width: calc((100% - 60rpx)/4);
}

.grid.col-5.grid-square>view {
	padding-bottom: calc((100% - 80rpx)/5);
	height: 0;
	width: calc((100% - 80rpx)/5);
}

.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n){
	margin-right: 0;
}

.grid.col-1>view {
	width: 100%;
}

.grid.col-2>view {
	width: 50%;
}

.grid.col-3>view {
	width: 33.33%;
}

.grid.col-4>view {
	width: 25%;
}

.grid.col-5>view {
	width: 20%;
}
	

	
	
	
.container {
  height: 376rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .head {
    /* color: $color; */
    display: flex;
    align-items: center;
    .head-img {
      width: 64rpx;
      height: 64rpx;
    }
    .info {
      flex-direction: column;
      display: flex;
      margin-left: 26rpx;
      .time {
        /* color: $borderColor; */
      }
    }
    .top {
      position: absolute;
      right: 40rpx;
      color: red;
    }
  }
  .body {
    /* color: $color; */
    & > p {
      font-weight: bold;
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;
    .number {
      /* color: $borderColor; */
      font-size: 26rpx;
      & + & {
        margin-left: 20rpx;
      }
    }
  }
}
</style>
